<template>
  <div class="person">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5">
        <card class="mb-20">
          <div slot="header">
            <span>个人信息</span>
          </div>
          <div style="text-align: center; margin-bottom: 20px">
            <avatar-uploader :url="$baseApi + $user.avatar"/>
          </div>
          <ul class="personInfo">
            <li>
              <span>账号</span>
              <span>{{$user.username}}</span>
            </li>
            <li>
              <span>级别</span>
              <span v-if="$special">特殊</span>
              <span v-else-if="$level === 1">超管</span>
              <span v-else-if="$level === 2">总部</span>
              <span v-else-if="$level === 3">一级网点</span>
              <span v-else>二级网点</span>
            </li>
            <li>
              <span>押金</span>
              <span>{{$user.deposit}}</span>
            </li>
            <li>
              <span>加盟费</span>
              <span>{{$user.initialFree}}</span>
            </li>
            <li>
              <span>子单数</span>
              <span>{{$user.sonWaybill}}</span>
            </li>
            <li>
              <span>资金</span>
              <span>{{price}}</span>
            </li>
            <li>
              <span>创建日期</span>
              <span>{{$user.createTime | formatDate}}</span>
            </li>
            <li>
              <span>安全设置</span>
              <span>
                <a style="color: #317ef3; cursor: pointer" @click="changePassword">修改密码</a>
              </span>
            </li>
          </ul>
        </card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="19">
        <info/>
      </el-col>
    </el-row>
    <password-dialog ref="PasswordDialog"></password-dialog>
  </div>
</template>

<script>
  import PasswordDialog from './password'
  import Info from './info'
  import AvatarUploader from '@/components/AvatarUploader'
  import {getFundApi} from "@/api/fund";

  export default {
    components: {PasswordDialog, Info, AvatarUploader},
    name: 'person',
    data() {
      return {
        price: null
      }
    },
    mounted() {
      this.getFund()
    },
    methods: {
      // 获得资金
      getFund() {
        getFundApi({username: this.$user.username}).then(result => {
          this.price = result.resultParam.fund.price
        })
      },
      // 修改密码
      changePassword() {
        const _this = this.$refs.PasswordDialog;
        _this.visible = true
      }
    }
  }
</script>

<style lang="scss">
  .person {
    .personInfo li {
      border-bottom: 1px solid #f0f3f4;
      border-top: 1px solid #f0f3f4;
      padding: 11px 0;
      font-size: 13px;
      display: flex;
      justify-content: space-between;
    }

    .el-avatar > img {
      width: 100%;
    }
  }
</style>
